<!--
 * @Description: 
 * @Date: 2024-04-15 08:53:50
 * @LastEditTime: 2024-11-01 16:31:37
-->
<template>
  <div class="contact">
    <div class="contact-top"></div>
    <div class="contact-content">
      <div class="item1">
        <div class="item-title">立法计划</div>
        <div class="listOne" style="display: flex;flex-direction: column; gap: 20px;">
          <div v-for="(item, index) in [...listOne, ...listOne]" :key="index">
            <div>
              <div style="display: flex; gap: 20px; align-items: center;margin-bottom: 15px;">
                <i class="el-icon-s-order" style="color:#E8A441;font-size: 30px;"></i>
                <div style="font-size: 26px; font-weight: bold;">{{ item.title }}</div>
              </div>
              <div style="padding-left: 50px; display: flex;flex-direction: column; gap: 10px;">
                <div v-for="(child, cIndex) in item.childs" :key="cIndex" style="font-size: 20px;">
                  {{ child }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item1">
        <div class="item-title">立法项目</div>
        <div class="listTwo">
          <div v-for="(item, index) in [...listTwo, ...listTwo]" :key="index"
            style="display: flex;gap: 20px;justify-content: space-between;margin-bottom: 20px;">
            <div style="flex: 1;">
              <p style="font-size: 26px; font-weight: bold;">{{ item.title }}</p>
              <p style="font-size: 20px;margin: 10px 0; "> {{ item.msg }}</p>
              <div style="display: flex;justify-content: space-between;">
                <div>
                  <i class="el-icon-user-solid" style="color: #fff;"></i>
                  <span>参与人数{{ item.num }}人</span>
                </div>
                <div>
                  <i class="el-icon-time" style="color: #fff;"></i>
                  <span>参与人数{{ item.num }}人</span>
                </div>
              </div>
            </div>
            <img :src="QRimg" />
          </div>
        </div>

      </div>
      <div style="display: flex; flex-direction: column; gap: 20px; overflow: hidden;">
        <div class="item1">
          <div class="item-title">联络站统计</div>
          <div class="listThree" style="display: flex; flex-direction: column; gap: 15px;">
            <div v-for="(item, index) in 10 " :key='index'>
              <p style="font-size: 20px;background: #006CED;padding: 5px;">法规名法规名法规名法规名法规名</p>
            </div>
          </div>
        </div>
        <div class="item1">
          <div class="item-title">事项热度榜</div>
           <div style="color: #fff;padding: 20px 0;">
              <div v-for="(item,index) in [...listFour,...listFour]" :key="index" style="display: flex;margin-bottom: 10px;align-items: center;">
                <span :style="{color:item.color ,border:'2px solid',padding:'5px'} " >{{ index+1 }}</span>
                <span style="margin: 0 10px;">{{ item.title }}</span>
                <img style="width: 25px;" src="../../../assets/images/huo.png"> 
                <span style="color: #E8A441; font-size: 20px; font-weight: bold;">{{ item.num }}</span>
              </div>
           </div>
        </div>
        <div class="item1" style="overflow: hidden;">
          <div class="item-title">金牌建议</div>
          <div style="width: 100% ;overflow: hidden; flex: 1;margin-top: 30px;">

            <vue-seamless-scroll :data="[...listFive, ...listFive]" style="
                  width: 100%;
                 
                  overflow: hidden;
                  white-space: nowrap;
                " :class-option="classOption1">
              <div style="
              display: inline-flex;
              position: relative;
              margin-right: 20px; color: #fff;" v-for="(item, index) in [...listFive, ...listFive]" :key="index">
                <img style="width: 160px;height: 200px;margin-right: 20px;" :src="item.img" />
                <div style="margin: 30px 0;">
                  <p style="font-size: 24px; font-weight: bold;margin-bottom: 30px;">{{ item.name }}</p>
                  <p style="width: 200px; word-wrap: break-word; 
  overflow-wrap: break-word; 
  white-space: normal; ">{{ item.msg }}</p>

                </div>
              </div>
            </vue-seamless-scroll>


          </div>
        </div>
      </div>

    </div>
    <img class="goBack" @click="() => {
      this.$router.go(-1);
    }
      " src="../../../assets/images/digitzation/back.png" />

  </div>
</template>

<script>
import CountTo from "vue-count-to";
import autofit from "autofit.js";
import QRCode from "qrcode";
import imgs from "../../../assets/images/digitzation/b2.png"
import vueSeamlessScroll from "vue-seamless-scroll";
import { addManageList } from "@/api/dbxx/dbxxManage";
import { listData } from "@/api/system/dict/data";
import {
  listQuestion,
  contactStationList,
} from "@/api/digitization/home/index";
import { delData } from "@/api/system/dict/data";
import { color } from "echarts";
export default {
  data() {
    return {
      tableList: [],
      wenTiList: [],
      areaList: [],
      num: 0,
      imgs: imgs,
      csName: null,
      baseUrl: process.env.VUE_APP_BASE_API,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
      },
      QRimg: "",
      profileVisible: false,
      leftData: [
        {
          title: '河庄坪镇人大代表联络站',
          num1: 2,
          num2: 8,
          num3: 52,
          sunNumber: 62
        },
        {
          title: '冯庄乡人大代表联络站',
          num1: 2,
          num2: 10,
          num3: 52,
          sunNumber: 64
        },
        {
          title: '向阳社区人大代表联络站',
          num1: 5,
          num2: 9,
          num3: 32,
          sunNumber: 56
        }
      ],
      listOne: [
        {
          title: "提请人代会审议项目(1件)",
          childs: ['1、延安市民营企业科技创新促进条例']
        },
        {
          title: "继续审议项目(3件)",
          childs: ['1、延安市民营企业科技创新促进条例', '2、延安市民营企业科技创新促进条例 ', '3、延安市民营企业科技创新促进条例']
        },
        {
          title: "初次审议项目(2件)",
          childs: ['1、延安市人民代表大会常务委员会关于促进和保障', ' 2、延安市民营企业科技创新促进条例']
        },
        {
          title: "提请人代会审议项目(2件)",
          childs: ['1、延安市民营企业科技创新促进条例（已完成）', ' 2、延安市民营企业科技创新促进条例']
        },
        {
          title: "提请人代会审议项目(1件)",
          childs: ['1、延安市民营企业科技创新促进条例']
        },
        {
          title: "提请人代会审议项目(2件)",
          childs: ['1、延安市民营企业科技创新促进条例', ' 2、延安市民营企业科技创新促进条例']
        },
      ],
      listTwo: [
        {
          title: '立法单位:市人大常委会法工委',
          msg: '为延安安全助力，《安全生产条例（修订草案)...',
          num: 125,
          time: '2023.2.1-2023.4.1'
        },
        {
          title: '立法单位:市人大常委会法工委',
          msg: '环境保护条例（修订草案）》诚征意见',
          num: 3345,
          time: '2023.2.1-2023.4.1'
        },
        {
          title: '立法单位:市人大常委会法工委',
          msg: '《文化保护条例（修订草案)》征集意见',
          num: 1334,
          time: '2023.2.1-2023.4.1'
        },
        {
          title: '立法单位:市人大常委会法工委',
          msg: '征求《安全生产条例（修订草案）》的意见建议',
          num: 145,
          time: '2023.2.1-2023.4.1'
        },
        {
          title: '立法单位:市人大常委会法工委',
          msg: '《教育发展条例（修订草案）》广纳良言',
          num: 125,
          time: '2023.2.1-2023.4.1'
        },
      ],
      listFour:[
        {
          title:"关于征集省人大常委会2023年立法计划和",
          num:112,
          color:'#FD1111',
        },
        {
          title:"延安市垃圾分类管理条例计划",
          num:112,
          color:'#EC7907',
        },
        {
          title:"延安市基本医疗保障条例修改计划",
          num:130,
          color:'#F7B10B',
        },
        {
          title:"关于征集市人大常委会2023年立法计划和",
          num:150,
          color:'#F7B10B',
        },
      ],
      listFive: [
        {
          name: "王宇",
          msg: "关王启动实施仙岩沈一路一勤主路连通工程的建议",
          img: "http://36.133.248.12:8085/prod-api/profile/avatar/2024/11/01/微信截图_20241101165530_20241101165905A008.png"
        },
        {
          name: "王宇",
          msg: "关王启动实施仙岩沈一路一勤主路连通工程的建议",
          img: "http://36.133.248.12:8085/prod-api/profile/avatar/2024/11/01/微信截图_20241101165633_20241101170203A009.png"
        },
        {
          name: "王宇",
          msg: "关王启动实施仙岩沈一路一勤主路连通工程的建议",
          img: "http://36.133.248.12:8085/prod-api/profile/avatar/2024/10/31/1121_20241031170737A007.png"
        },
        {
          name: "王宇",
          msg: "关王启动实施仙岩沈一路一勤主路连通工程的建议",
          img: "http://36.133.248.12:8085/prod-api/profile/avatar/2024/10/31/1121_20241031170737A007.png"
        }
      ]
    };
  },
  components: {
    vueSeamlessScroll,

    CountTo,
  },
  methods: {
    skip(item) {
      this.$router.push({
        path: "/userH5",
        query: {
          id: item.userId,
          csName: this.csName,
          userName: item.userName,
        },
      });
    },
    handleItemClick(data, index, e) {
      this.profileVisible = true;
    },
  },
  computed: {
    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        // limitMoveNum: this.wenTiList.length, // 开始无缝滚动的数据量 this.tableList
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
    classOption1() {
      return {
        step: 0.1, // 数值越大速度滚动越快
        // limitMoveNum: this.tableList.length, // 开始无缝滚动的数据量 this.tableList
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  async mounted() {
    autofit.init({
      dh: 1080,
      dw: 1920,
      el: ".contact",
      resize: true,
    });
    this.QRimg = await QRCode.toDataURL(
      `http://36.139.241.126:8092`
    )
    this.csName = this.$route.query.name;
    // addManageList({ csId: this.$route.query.id }).then((res) => {
    //   res.rows.length > 0 &&
    //     res.rows.forEach(
    //       async (item) =>
    //       (item.qrurl = await QRCode.toDataURL(
    //         `http://36.139.241.126:8092/userH5?id=${item.userId}`
    //       ))
    //     );
    //   this.tableList = res.rows;
    //   this.num = this.leftData.length;
    // });
    // listQuestion({ csId: this.$route.query.id }).then((res) => {
    //   this.wenTiList = res.rows;
    // });
    // listData({ dictType: "sys_area_type" }).then((dict) => {
    //   contactStationList().then((res) => {
    //     let dataArr = dict.rows.map((item) => {
    //       return {
    //         id: item.dictValue,
    //         name: item.dictLabel,
    //         count: 0,
    //       };
    //     });

    //     res.rows.forEach((mapItem) => {
    //       let index = dataArr.findIndex((item) => item.id == mapItem.area);

    //       if (index !== -1) {
    //         dataArr[index].count += 1;
    //       }
    //     });

    //     this.areaList = dataArr;
    //     console.log(this.areaList, 8989);
    //   });
    // });
  },
};
</script>
<style lang="scss" scoped>
.contact {
  width: 100%;
  height: 100%;
  background: #021132;
  display: flex;
  flex-direction: column;

  &-top {
    width: 100%;
    height: 50px;
  }

  &-content {
    width: 100%;
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
    gap: 40px;

    &>div {
      flex: 1;
    }

    .item1 {
      height: 100%;
      flex: 1;
      margin-right: 20px;
      //display: flex;
      gap: 20px;
      //flex-direction: column;
      background: url("../../../assets/images/digitzation/center2.png");
      background-size: 100% 100%;
      padding: 20px;
      box-sizing: border-box;
      overflow: auto;

      &::-webkit-scrollbar-track {
        background: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background: transparent;
      }

      &::-webkit-scrollbar-thumb:hover {
        background: transparent;
      }


    }

    .item-title {
      width: 100%;
      height: 30px;
      font-size: 18px;
      line-height: 30px;
      color: #fff;
      padding-left: 10px;
      background: url("../../../assets/images/digitzation/line.png") no-repeat;
      background-size: 100% 100%;
    }

    .listOne,
    .listTwo,
    .listThree {
      padding: 20px 0;
      color: #fff;
    }
  }

  ::v-deep .el-empty__description p {
    color: #3486da;
  }
}
</style>
